<!--
 * @Author: wangjianwhy wangjianwhy@sina.com
 * @Date: 2024-10-16 17:26:30
 * @LastEditors: wangjianwhy wangjianwhy@sina.com
 * @LastEditTime: 2024-10-25 18:00:35
 * @FilePath: \my-vue3-appg:\vscode-work\tlo-shopping\src\components\product\ShopColumnList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="shop-rows">
        <div class="trade" v-for="(shop, index) in dataList" :key="index" @click="merchand">
            <div class="trade-img">
                <img src="/src/assets/lunbo/image1.jpeg" />
            </div>
            <div class="rounded-content">
                <div class="title-content">
                    <strong>{{ shop.brandName }}/{{ shop.subBrandName }} </strong>
                    <div>{{ truncateText(shop.title, 15) }}</div>
                </div>
                <div class="tag">
                    <label v-for="(tag, index) in shop.tags" :key="index">{{ tag }}</label>
                </div>
                <div class="sell-top">
                    <div v-if="shop.subBrandName != null && shop.subBrandName != ''">
                        <img src="/src/assets/icons/atop.png"/>
                        <span>垃圾志高冰箱排名倒数第1名 ❯</span>
                    </div>
                </div>
                <div>
                    <strong class="money">
                        <PriceDisplay :price="shop.price" :activePrice="shop.activePrice" />
                    </strong>
                </div>
                <div class="haopin">
                    <label>{{ shop.evalCount }}条评价</label>
                    <label>{{ shop.evalRate }}%好评</label>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { truncateText } from '../util/tools.js';
import { defineProps, watch } from 'vue';
import PriceDisplay from './PriceDisplay.vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const merchand = (shop) => {
    console.log(shop);
    const shopId = shop.id
    router.push({ name:  'productDetail', query: {id: shopId} });
}

const props = defineProps({
    dataList: Object
});

watch(() => props.dataList, (newDataList) => {
      // 当 dataList 发生变化时，这里的代码会执行
    console.log('新dataList changed:', newDataList);
});

</script>

<style scoped>
.shop-rows {
    width: 100%;
    height: auto;
}
.trade {
    height: auto;
    display: flex;
    margin: 10px 0px;
    width: 100%;
}
/*左侧*/
.trade-img {
    float: left;
    width: 50%; /* 宽度为40% */
    background-color: #fff; /* 示例背景颜色 */
    padding-top: 40%; /* padding-top也设置为40%，形成正方形 */
    position: relative;
}
.trade-img img {
    width: 100%; /* 图片宽度为100% */
    height: auto; /* 图片高度为100% */
    max-height: 100%;
    object-fit: cover; /* 裁剪图片以覆盖整个容器，保持比例 */
    position: absolute; /* 绝对定位，使其填满整个正方形 */
    top: 0;
    left: 0;
    border-radius: 12px;
}

.rounded-content {
    text-align: left; /* 让文本和图片居中显示 */
    width: 60%; /* 容器宽度，可以根据需要调整 */
    margin: 2px; /* 水平居中 */
    padding: 0px 2px;
    overflow: hidden; /* 防止内容溢出 */
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    float: left;
    font-size: 14px;
}
.rounded-content .title-content {
    height: 40px;
}
.rounded-content .tag {
    height: auto;
    width: auto;
}
.rounded-content .tag label {
    position: relative;
    border-radius: 8px;
    padding: 1px 2px;
    font-size: 10px;
    background-color: rgb(197, 194, 194);
    width: auto;
    height: 100%;
    margin: 2px;
    float: left;
}
.rounded-content .sell-top {
    width: 100%;
    height: 22px;
    float: left;
    background-color: ffcc99;
    color: #ff9900;
    font-size: 12px;
    font-weight: bold;
}
.sell-top img {
    width: 20px;
    height: 20px;
    float: left;
}
.sell-top span {
    margin-bottom: 10px;
    width: auto;
    float: left;
    margin-top: 2px;
}
.rounded-content .money {
    width: 100%;
    color: red;
    font-size: 18px;
    cursor: pointer;
    float: left;
    height: 28px;
}
.rounded-content .haopin {
    float: left;
    height: 20px;
    width: 100%;
}
.rounded-content .haopin label {
    font-size: 12px;
    width: 100%;
    margin: 0px 10px 0px 0px;
    color: dimgrey;
    cursor: pointer;
}
</style>